<template>
  <view class="container">
    <navigationBar title="消息中心" color="#fff" backgroundColor="#2F6BFF"
                   paddingStatusBarColor="#2F6BFF"></navigationBar>

    <view class="list">
      <uni-swipe-action>
        <!-- 基础用法 -->
        <uni-swipe-action-item v-for="(item,index) in list" :key="index" :right-options="[]">
          <template v-slot:left>
          </template>
          <template v-slot:right>
            <view class="item-delete" style="width: 75px; text-align: center; line-height: 48px;"
                  @click="onDelete(index)">删除
            </view>
          </template>
          <view class="list-item">
            <view class="list-item-title">{{ item.title }}</view>
            <view class="list-item-main">{{ item.value }}</view>
            <view class="list-item-date">{{ item.date }}</view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </view>

    <view class="empty" v-if="!list.length">
      <view class="empty-image">
        <image src=""></image>
      </view>
      <view class="empty-text">暂无消息</view>
    </view>

  </view>
</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app";
import {ref} from 'vue'
import {showMessage} from "/@/utils/util";
import {cloneDeep} from "lodash"

const list = ref([
  {
    title: '具体以协议为准',
    value: '具体以协议为准具体以协议为准具体以协议为准具体以协议为准',
    date: "2025-04-08  20:12:20",
  },
  {
    title: '具体以协议为准',
    value: '具体以协议为准具体以协议为准具体以协议为准具体以协议为准',
    date: "2025-04-08  20:12:20",
  },
  {
    title: '具体以协议为准',
    value: '具体以协议为准具体以协议为准具体以协议为准具体以协议为准',
    date: "2025-04-08  20:12:20",
  },
])

onLoad(() => {
})

const onDelete = (e) => {
  let temp = cloneDeep(list.value)
  temp.splice(e, 1)
  list.value = temp
  showMessage('删除成功');
}
</script>

<style lang="scss" scoped>
@import "message";
</style>
